<template>
  <div>
    <el-tabs @tab-click="search()" v-model="formData.topic">
      <el-tab-pane  label="水文数据" name="水文数据">
        <el-table
          :data="searchResult"
          style="width: 100%" >
          <el-table-column prop="uploadTime" label="上传时间"></el-table-column>
          <el-table-column label="所属地区">
            <template slot-scope="scope">
              <span v-html="scope.row.district0"></span>
            </template>
          </el-table-column>
          <el-table-column label="文件名称">
            <template slot-scope="scope">
              <span v-html="scope.row.filename"></span>
            </template>
          </el-table-column>
          <el-table-column label="文件描述">
            <template slot-scope="scope">
              <span v-html="scope.row.fileDesc"></span>
            </template>
          </el-table-column>
          <el-table-column label="上传用户">
            <template slot-scope="scope">
              <span v-html="scope.row.uploader"></span>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="操作" class="el-icon-download">
            <template slot-scope="scope">
              <el-button size="small" @click="fileDownloadById(scope.row)">下载</el-button>
              <el-button size="small" @click="fileDownloadByZip(scope.row)">预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="水利数据" name="水利数据">
        <el-table
          :data="searchResult"
          style="width: 100%" >
          <el-table-column prop="uploadTime" label="上传时间"></el-table-column>
          <el-table-column label="所属地区">
            <template slot-scope="scope">
              <span v-html="scope.row.district0"></span>
            </template>
          </el-table-column>
          <el-table-column label="文件名称">
            <template slot-scope="scope">
              <span v-html="scope.row.filename"></span>
            </template>
          </el-table-column>
          <el-table-column label="文件描述">
            <template slot-scope="scope">
              <span v-html="scope.row.fileDesc"></span>
            </template>
          </el-table-column>
          <el-table-column label="上传用户">
            <template slot-scope="scope">
              <span v-html="scope.row.uploader"></span>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="操作" class="el-icon-download">
            <template slot-scope="scope">
              <el-button size="small" @click="fileDownloadById(scope.row)">下载</el-button>
              <el-button size="small" @click="fileDownloadByZip(scope.row)">预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="水质数据" name="水质数据">
        <el-table
          :data="searchResult"
          style="width: 100%" >
          <el-table-column prop="uploadTime" label="上传时间"></el-table-column>
          <el-table-column label="所属地区">
            <template slot-scope="scope">
              <span v-html="scope.row.district0"></span>
            </template>
          </el-table-column>
          <el-table-column label="文件名称">
            <template slot-scope="scope">
              <span v-html="scope.row.filename"></span>
            </template>
          </el-table-column>
          <el-table-column label="文件描述">
            <template slot-scope="scope">
              <span v-html="scope.row.fileDesc"></span>
            </template>
          </el-table-column>
          <el-table-column label="上传用户">
            <template slot-scope="scope">
              <span v-html="scope.row.uploader"></span>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="操作" class="el-icon-download">
            <template slot-scope="scope">
              <el-button size="small" @click="fileDownloadById(scope.row)">下载</el-button>
              <el-button size="small" @click="fileDownloadByZip(scope.row)">预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="遥感数据" name="遥感数据">
        <el-table
          :data="searchResult"
          style="width: 100%" >
          <el-table-column prop="uploadTime" label="上传时间"></el-table-column>
          <el-table-column label="所属地区">
            <template slot-scope="scope">
              <span v-html="scope.row.district0"></span>
            </template>
          </el-table-column>
          <el-table-column label="文件名称">
            <template slot-scope="scope">
              <span v-html="scope.row.filename"></span>
            </template>
          </el-table-column>
          <el-table-column label="文件描述">
            <template slot-scope="scope">
              <span v-html="scope.row.fileDesc"></span>
            </template>
          </el-table-column>
          <el-table-column label="上传用户">
            <template slot-scope="scope">
              <span v-html="scope.row.uploader"></span>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="操作" class="el-icon-download">
            <template slot-scope="scope">
              <el-button size="small" @click="fileDownloadById(scope.row)">下载</el-button>
              <el-button size="small" @click="fileDownloadByZip(scope.row)">预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="水工建筑" name="水工建筑">
        <el-table
          :data="searchResult"
          style="width: 100%" >
          <el-table-column prop="uploadTime" label="上传时间"></el-table-column>
          <el-table-column label="所属地区">
            <template slot-scope="scope">
              <span v-html="scope.row.district0"></span>
            </template>
          </el-table-column>
          <el-table-column label="文件名称">
            <template slot-scope="scope">
              <span v-html="scope.row.filename"></span>
            </template>
          </el-table-column>
          <el-table-column label="文件描述">
            <template slot-scope="scope">
              <span v-html="scope.row.fileDesc"></span>
            </template>
          </el-table-column>
          <el-table-column label="上传用户">
            <template slot-scope="scope">
              <span v-html="scope.row.uploader"></span>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="操作" class="el-icon-download">
            <template slot-scope="scope">
              <el-button size="small" @click="fileDownloadById(scope.row)">下载</el-button>
              <el-button size="small" @click="fileDownloadByZip(scope.row)">预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div id="map"></div>
  </div>
</template>
<script>
  import L from "leaflet";
  import "leaflet/dist/leaflet.css";
  import {gettopicsearchData}from '../Api/api';

  export default {
    data() {
      return {
        curMap:'',
        mapVisible:false,
        // mapPathRoot:'http://192.168.1.7:9000/',
        mapPathRoot:'http://192.168.1.7:9000/',
        // mapPathRoot:'http://192.168.1.4:9000/',
       // mapPathRoot:'http://192.168.1.32:9000/',

        // curMap:'fileid',
        map:'',
        filters:{searchVal:''},
        activeName: 'first',

        searchResult: [],
        formData: {
          startNum: '1',
          filename: '',
          topic: '',
          district: '',
          fileType: '',
          startTime: '',
          endTime: '',
          query:''
        },
        formLabelWidth: '120px',

          // uploadTime: '2020-09-10 19:56:32',
          // uploader: '<span style="color: red;">武汉</span>水科院',
          // fileDesc: '<span style="color: red;">武汉</span>市梁子湖2016年测站水位',
          // district: '湖北<span style="color: red;">武汉</span>',
          // topic: '水文数据',
          // thumbnail: "hello",
          // fileId:''

      }
    },
    methods: {
      search() {
        //console.log('jieguo');
        let that = this;
        gettopicsearchData(that.formData).then(function (res) {
          console.log(res);
          if (res.status === 200 && res.data.code === 0) {
            that.searchResult = res.data.data;
            that.searchResult = that.searchResult.filter((item, i) =>{
              item.district0 = '';
              item.district.forEach((content,index,array)=>{
                item.district0 += content;
              });
              return item;
            })
          }
        })
      },
      fileDownloadById(row){
        let that = this;

        let url = 'http://192.168.1.7:9000/download/ById?id='+ row.id;
        const a = document.createElement('a');
        a.style.display = 'none';
        a.download = row.filename;
        a.href = url;
        a.click();
      },
      fileDownloadByZip(row){
        // let that = this;
        downloadById(row.id).then(function (res) {
          console.log(res);
          // if (res.status === 200 && res.data.code === 0) {
          //   that.searchResult = res.data.data;
          //   that.searchResult = that.searchResult.filter((item, i) =>{
          //     item.district0 = item.district[0];
          //     return item;
          //   })
          // }
        })
      },
      viewMap(row){
        let that = this;
        that.mapVisible = true;
        that.curMap = row.fileId
      },
      initMap() {
        let map = L.map("map", {
          minZoom: 7,
          maxZoom: 13,
          center: [30.241392072394096, 114.23695323220879],
          zoom: 12,
          zoomControl: false,
          attributionControl: false,
          crs: L.CRS.EPSG3857
        });
        this.map = map;　　　　//data上需要挂载
        window.map = map;
        // L.tileLayer(
        //   // "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
        //   "http://http://osm.org/copyright/{s}.tile.osm.org/{z}/{x}/{y}.png"
        // ).addTo(map);
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
        console.log('已发送底图获取请求！！！！！！');
        L.tileLayer(this.mapPathRoot + "rasterImage/searchTilesData/" + 'b6b8347f-621f-490a-a950-1d92f0a0b518_raster_info' + '/{z}/{x}/{y}', {tms: true, opacity: 0.7, attribution: ""}).addTo(map);
        // L.tileLayer(this.mapPathRoot + "rasterImage/searchTilesData?" + this.curMap + '/{z}/{x}/{y}.png', {tms: true, opacity: 0.7, attribution: ""}).addTo(map);
        console.log('已发送瓦片获取请求！！！！！！')
        },
      handleClose(){

      }
    },
    mounted: function () {
      this.initMap();
      console.log('hello')
    },


  }
</script>
<style>
  #map {
    width:100%;
    height:100vh;
  }
</style>
